<template>
  <div id="home">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#409EFF"
      text-color="#fff"
      active-text-color="#fff"
      :router="true"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/home/personalcenter">个人中心</el-menu-item>
      <el-menu-item index="/home/information">信息中心</el-menu-item>
      <el-menu-item index="/home/atten">考勤管理</el-menu-item>
      <el-menu-item index="/home/meetmanagement">会议管理</el-menu-item>
      <el-menu-item index="/home/achievements">绩效管理</el-menu-item>
      <el-menu-item index="/home/staffAdmin">员工管理</el-menu-item>
      <el-menu-item index="/home/addressbook">通讯录</el-menu-item>
      <el-menu-item index="/home/system">系统管理</el-menu-item>
      <el-submenu index="8" id="shenpi">
        <template slot="title"
          ><el-badge :value="tongzhiData.length>=1?tongzhiData.length:''"
            ><i class="el-icon-chat-line-square"></i> </el-badge
        ></template>
        <el-card class="box-card" v-show='tongzhiData.length>=1?true:false'>
          <div v-for="o in tongzhiData.length>4?4:tongzhiData.length" :key="o" class="text item">
            <p>
              <i class="el-icon-postcard"></i>审批提醒 <span>{{ time }}</span>
            </p>
            <span>{{
              tongzhiData[o - 1].name +
              "于" +
              tongzhiData[o - 1].applytime +
              "发起一条审批提醒"
            }}</span>
          </div>
          <button>
            <router-link to="/home/atten/approval">查看更多>></router-link>
          </button>
        </el-card>
        <el-card class="box-card" v-show='tongzhiData.length>=1?false:true'>
          <div class="text item">
            <p>
              <i class="el-icon-postcard"></i>暂无提醒 <span>{{ time }}</span>
            </p>
          </div>
        </el-card>
      </el-submenu>
      <el-menu-item><i class="el-icon-question"></i></el-menu-item>
      <el-menu-item><i class="el-icon-s-open"></i></el-menu-item>
      <el-submenu index="9">
        <template slot="title">
          <img :src="require('../assets/images/' + touxiang + '.jpg')" alt="" />{{
            name
          }}</template
        >
        <el-menu-item index="/home/personalcenter">个人中心</el-menu-item>
        <el-menu-item @click="dialogVisible = true">修改密码</el-menu-item>
      </el-submenu>
      <el-menu-item><i class="el-icon-circle-close" @click="exit"></i></el-menu-item>
      <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <!-- <el-input
          placeholder="旧密码"
          v-model="jiuinput"
          show-password
        ></el-input>
        <el-input
          placeholder="新密码"
          v-model="xininput"
          show-password
        ></el-input>
        <el-input
          placeholder="确认密码"
          v-model="restinput"
          show-password
        ></el-input> -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="70px"
          class="demo-ruleForm"
        >
          <el-form-item label="旧密码">
            <el-input
              type="password"
              v-model="ruleForm.jiu"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-menu>
    <router-view></router-view>
  </div>
</template>
<script>
import axios from "@/utils/http";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // name: "巴热",
      // aaa: "figure1",
      // touxiang: "",
      dialogVisible: false,
      jiuinput: "",
      xininput: "",
      restinput: "",
      zhanghao: "",
      ruleForm: {
        pass: "",
        checkPass: "",
        jiu: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //修改账号密码
    submitForm(formName) {
      if (this.$store.state.data.account) {
        this.zhanghao = this.$store.state.data.account;
      } else {
        this.zhanghao = JSON.parse(sessionStorage.getItem("user")).account;
      }
      this.$refs[formName].validate((valid) => {
        console.log(this.ruleForm.pass);
        if (valid) {
          axios({
            url: "/home//edit_pwd",
            method: "post",
            data: {
              xin: this.ruleForm.pass,
              jiu: this.ruleForm.jiu,
              account: this.zhanghao,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.dialogVisible = false;
              this.$message({
                message: "修改成功！！！",
                type: "success",
              });
            } else if (res.data.code == 203) {
              this.$message.error("修改失败！");
              this.dialogVisible = false;
            }
            // console.log(res);
          });
        } else {
          this.$message({
            message: "两次输入的密码不一致！",
            type: "warning",
          });
          return false;
        }
      });
    },
    //退出
    exit:function(){
      this.$router.replace("/");
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("shenpi");
    }
  },
  computed: {
    name: function () {
      if (this.$store.state.data.name) {
        return this.$store.state.data.name;
      } else {
        return JSON.parse(sessionStorage.getItem("user")).name;
      }
    },
    touxiang: function () {
      if (this.$store.state.data.figure) {
        return this.$store.state.data.figure;
      } else {
        return JSON.parse(sessionStorage.getItem("user")).figure;
      }
    },
    tongzhiData: function () {
      if (this.$store.state.tongzhiData) {
        this.tixinData = this.$store.state.tongzhiData;
        return this.$store.state.tongzhiData;
      } else {
        this.tixinData = JSON.parse(sessionStorage.getItem("shenpi"));
        return JSON.parse(sessionStorage.getItem("shenpi"));
      }
      // console.log();
    },
    time: function () {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const day = date.date > 10 ? date.date : "0" + date.date;
      return date.year + "-" + newmonth + "-" + day;
    },
  },
  mounted: function () {
    this.tableData=this.$store.state.tongzhiData
  },
};
</script>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
  background: transparent;
}
#home {
  height: 100%;
}
#home > .el-menu > .el-menu-item,
#home > .el-menu > .el-submenu {
  width: 7%;
  padding: 0;
  text-align: center;
}
#home > .el-menu > .el-menu-item:nth-child(1) {
  margin-left: 1%;
}
#home > .el-menu > .el-menu-item:nth-child(11),
/* #home > .el-menu > .el-menu-item:nth-child(13), */
#home > .el-menu > .el-menu-item:last-child,
#home > .el-menu > .el-menu-item:nth-child(12) {
  width: 3.5%;
  text-align: center;
}
.el-menu-item i,
.el-submenu i {
  font-size: 25px;
  color: #fff;
}
/* .el-menu > .el-menu-item > img {
  width: 50%;
  margin-left: 50%;
  margin-top: -3%;
} */
img {
  width: 60%;
  border-radius: 50px;
}
.el-card p {
  width: 100%;
}
.el-card p > span {
  display: inline-block;
  margin-left: 40%;
  font-size: 10px;
  color: rgb(153, 153, 153);
}
.el-card p > i {
  padding: 5px;
  color: rgb(64, 158, 255);
}
.el-card div > span {
  display: inline-block;
  font-size: 14px;
  margin-top: 5px;
}
.el-dialog .el-input {
  margin: 5px 0;
}
.el-card button {
  width: 100%;
  background: transparent;
  padding: 5px 0;
  border: 0.5px solid gainsboro;
  margin-top: 5%;
  color: rgb(64, 158, 255);
}
</style>
<style>
.el-badge__content.is-fixed {
  top: 15px;
}
.el-menu--popup {
  width: 400px;
}
</style>
